<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>500</title>
  <style type="text/css">
  body {
    font: 13.34px Arial, Helvetica, Sans-Serif;
    margin:50px 0px; padding:0px;
    text-align:center;
  }
  
  h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 0; 
    padding: 0;
  }
  
  #mainContainer {
    margin: 0px auto;
    width: 500px;
    text-align:left;
  }
  
  #errorContainer {
    width: 500px;
    background: url() no-repeat;
    height: 230px;
  }
  
  #errorImage {
    float: left;
    width: 119px;
    margin-top: 40px;
    margin-left: 40px;
  }
  
  #errorText {
      float: right;
      width: 280px;
      margin-top: 40px;
      margin-right: 40px;
  }

  #creditsContainer 
  {
    margin-top: -30px;
    margin-left: 40px;
    color: #999999
  }
  
  #creditsContainer a
  {
    color: #777777
  }
  
  #errorToggle
  {
    float:right;
  }
  
  #errorToggle a
  {
    color: #777777;
  }
  
  #errorDetails
  {
    width: 100%;
    margin: 24px;
    text-align: left;
    display: block;
  }
  
  .clear {
    clear: both;
    height: 0px;
    margin: 0;
    padding: 0;
    visibility: hidden;
  }
  
  code {
    margin: 0 2px;
    padding: 0 5px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    border-radius: 3px;
  }
  </style>

  <!--[if lt IE 8]>
  <style type="text/css">
    #embeddedImage {
      visibility: hidden;
    }
  </style>
  <![endif]-->
  
  <script type="text/javascript">
    function ShowHideDetails() {
      var details =  document.getElementById('errorDetails');
      
      if (details.style.display == 'block') {
        details.style.display = 'none';
      } else {
        details.style.display = 'block';
      }
    }
  </script>
</head>
<body>
  <div id="mainContainer">
    <div id="errorContainer">
      <div id="errorImage">
        <img id="embeddedImage" src="" width="115" height="150">
      </div>
      <div id="errorText">
        <h1>500 - InternalServerError</h1>
        <p>Something went horribly, horribly wrong while servicing your request.</p>
        <p>We're sorry :-(</p>
      </div>
      <div class="clear"></div>
    </div>
    <div id="creditsContainer">
      <p>Graphics courtesy of the awesome <a href="http://theoatmeal.com/" target="_blank">Matthew Inman</a> </p>
    </div>
    <div id="errorToggle"><a href="javascript:ShowHideDetails();">Details</a></div>
    <div class="clear"></div>
  </div>
  <div id="errorDetails">
    <h2>Error Details</h2>
    <pre id="errorContents">[DETAILS]</pre>
  </div>
  <script type="text/javascript">
      var toggle = document.getElementById('errorToggle');
      var errorContents = document.getElementById('errorContents');
      
      if (errorContents.innerText == '') {
          toggle.style.display = 'none';
      }
  </script>
</body>
</html>
